<template>
  <div class="loading">
    <div class="AssetsManagement">
      <div class="searchBox">
        <div>
          <div class="searchBoxTitle">选择分区</div>
          <el-input class="search1"
                    placeholder="请输入角色名称"></el-input>
        </div>
        <div class="newButton"
             @click="search()">搜索</div>
        <div class="newButton"
             @click="addData()">添加</div>
        <div class="newButton"
             @click="allBind()">全部绑定</div>
        <div class="newButton"
             @click="allUnBind()">全部解绑</div>
        <div class="newButton"
             @click="allDelete()">全部删除</div>
      </div>
      <div class="tableBox">
        <el-table v-loading="loading"
                  :data="dataFilter(tableData)"
                  style="width: 100%"
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection"
                           width="55"></el-table-column>
          <el-table-column label="序号"
                           width="min-120">
            <template slot-scope="scope">{{(scope.$index + 1) + ((page - 1) * size)}}</template>
          </el-table-column>
          <el-table-column prop="roleId"
                           label="角色ID"
                           min-width="180">
            <template slot-scope="scope">
              <span title="点击编辑"
                    style="cursor:pointer"
                    @click="editData(scope)">{{scope.row.roleId}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="roleName"
                           label="角色名称"
                           width="180"></el-table-column>
          <el-table-column prop="roleType"
                           label="角色类型"
                           width="180"></el-table-column>
          <el-table-column prop="roleBoss"
                           label="角色上限"
                           width="180"></el-table-column>
          <el-table-column prop="roleDate"
                           label="创建日期"
                           width="180"></el-table-column>
          <el-table-column label="操作"
                           width="300"
                           label-class-name="table_column_title"
                           class-name="table_column_list">
            <template slot-scope="scope">
              <div class="newButtonSmall"
                   @click="editRole()">编辑权限</div>
              <div class="newButtonSmall"
                   @click="editData(scope)">编辑</div>
              <div class="newButtonSmall"
                   @click="deleteData(scope)">删除</div>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div class="page">
          <el-pagination background
                         @size-change="sizeChange"
                         @current-change="currentChange"
                         :current-page="page"
                         :page-sizes="sizes"
                         :page-size="size"
                         :layout="layout"
                         :total="tableData.length"></el-pagination>
        </div>
        <!--新增对话框-->
        <el-dialog title="资产管理"
                   :visible.sync="dialogFormVisible"
                   :close-on-click-modal="false"
                   :show-close="false"
                   width="60%">
          <el-form ref="dataForm"
                   :model="form"
                   :rules="rules">
            <el-row>
              <el-form-item label="角色名称"
                            prop="roleName">
                <el-input v-model="form.roleName"
                          placeholder="请输入角色名称"></el-input>
              </el-form-item>
              <el-form-item label="角色类型"
                            prop="roleType">
                <el-select v-model="form.roleType"
                           placeholder="请选择">
                  <el-option v-for="item in options"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value"></el-option>
                </el-select>
                <!-- <el-input v-model="form.roleType" placeholder="请输入角色类型"></el-input> -->
              </el-form-item>
              <el-form-item label="角色上限"
                            prop="roleBoss">
                <el-select v-model="form.roleBoss"
                           placeholder="请选择">
                  <el-option v-for="item in options"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value"></el-option>
                </el-select>
                <!-- <el-input v-model="form.roleBoss" placeholder="请输入角色上限"></el-input> -->
              </el-form-item>
            </el-row>
          </el-form>
          <div slot="footer"
               class="dialog-footer"
               align="center">
            <el-button type="primary"
                       @click="confirm()">修 改</el-button>
            <el-button @click="cancel()">取 消</el-button>
          </div>
        </el-dialog>
        <!--新增对话框-->
        <el-dialog title="资产管理"
                   :visible.sync="dialogFormVisible2"
                   :close-on-click-modal="false"
                   :show-close="false"
                   width="60%">
          <el-tree :data="data2"
                   show-checkbox
                   node-key="id"
                   :props="defaultProps"></el-tree>
          <div slot="footer"
               class="dialog-footer"
               align="center">
            <el-button type="primary"
                       @click="confirm2()">修 改</el-button>
            <el-button @click="cancel2()">取 消</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import AssetsData from '../../../assets/modelData/Role.json'
import * as sysTool from '../../../js/systemTool'
import * as cookie from '../../../js/cookie'
export default {
  name: 'DeviceManagement',
  data () {
    return {
      loading: true, // 等待效果
      dialogFormVisible: false, // 对话框关闭
      dialogFormVisible2: false, // 对话框2关闭
      sizes: [10, 20, 50], // 分页展示条数
      layout: 'total, sizes, prev, pager, next, jumper', // 分页选项
      page: 1, // 按翻页
      size: 10, // 每页几条
      multipleSelection: [], // 复选框
      allChicket: [], // 复选框
      ip: '1.1.1.1',
      area: '北京市',
      brower: 'chrome',
      os: 'windows7',
      form: {}, // 修改数据
      tableData: [], // 表格数据

      // 以上必备项结束，下面为不同页面数据
      rules: { // 表单验证
        roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
        roleType: [{ required: true, message: '请选择角色类型', trigger: 'blur' }],
        roleBoss: [{ required: true, message: '请选择角色序号', trigger: 'blur' }]
      },
      options: [{ // 下拉框
        value: '选项1',
        label: '超级管理员'
      }, {
        value: '选项2',
        label: '管理员'
      }, {
        value: '选项3',
        label: '用户'
      }],
      value: '', // 下拉框value
      data2: [{ // tree
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      defaultProps: { // tree 配置选项
        children: 'children',
        label: 'label'
      }
    }
  },

  methods: {
    // 初始化获取数据
    init () {
      this.loading = true
      this.getTableList()
    },
    // 处理表格数据
    dataFilter (data) {
      return data.filter(
        (e, i) => i >= (this.page - 1) * this.size && i < this.page * this.size
      )
    },
    // 展示所有信息
    getTableList () {
      this.loading = true
      var mycars = AssetsData.result
      let num = 1
      if (mycars != null) {
        for (const item of mycars) {
          item.num = num++
        }
        this.tableData = mycars
      }
      setTimeout(() => {
        this.loading = false
      }, 1.5 * 1000)
    },
    search () {
      this.getTableList()
    },
    // 复选框内容
    handleSelectionChange (val) {
      this.allChicket = []
      this.multipleSelection = val
      for (var i = 0; i < this.multipleSelection.length; i++) {
        this.allChicket.push(this.multipleSelection[i].Device_ID)
      }
    },
    // 添加数据
    addData () {
      this.changeIndex = -1
      this.form = {}
      this.dialogFormVisible = true
      // 清空Validate校验
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 修改数据
    editData (scope) {
      this.changeIndex = scope.$index
      this.form = JSON.parse(JSON.stringify(scope.row))
      this.dialogFormVisible = true
      // 清空Validate校验
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    editRole () {
      this.dialogFormVisible2 = true
    },
    // 点击修改按钮
    confirm () {
      // 判断是否有input为空
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          var origionData = this.tableData[this.changeIndex]
          var changeData
          if (origionData) {
            console.log('修改')
            changeData = this.form
            // 判断每一项是否修改
            let changed = false
            for (let i in changeData) {
              if (changeData[i] !== origionData[i]) {
                changed = true
              }
            }
            if (changed) {
              this.$confirm('确定提交修改吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              })
                .then(res => {
                  // 注册按钮等待效果初始化
                  const loading = this.$loading({
                    lock: true,
                    text: '更改成功，请稍后...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                  })
                  setTimeout(() => {
                    this.dialogFormVisible = false
                    this.getTableList()
                    loading.close()
                    this.$message({
                      message: '修改成功',
                      type: 'success'
                    })
                  }, 1000)
                })
                .catch(res => {
                  this.$message(`取消修改`)
                })
            } else {
              this.$message(`没有任何改动`)
            }
          } else {
            console.log('新增')
            this.$confirm('确定添加数据吗？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
              .then(res => {
                // 注册按钮等待效果初始化
                const loading = this.$loading({
                  lock: true,
                  text: '更改成功，请稍后...',
                  spinner: 'el-icon-loading',
                  background: 'rgba(0, 0, 0, 0.7)'
                })
                setTimeout(() => {
                  this.dialogFormVisible = false
                  this.getTableList()
                  loading.close()
                  this.$message({
                    message: '添加成功',
                    type: 'success'
                  })
                }, 1000)
              })
              .catch(res => {
                this.$message(`取消添加`)
              })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    confirm2 () {
      this.dialogFormVisible2 = false
    },
    // 取消修改
    cancel () {
      this.form = {}
      this.dialogFormVisible = false
    },
    cancel2 () {
      this.dialogFormVisible2 = false
    },
    // 删除数据
    deleteData (scoped) {
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(res => {
          var brower = sysTool.GetCurrentBrowser()
          var os = sysTool.GetOs()
          var username = cookie.getCookie('userAccountNumber')
          var password = cookie.getCookie('userAccountPassword')
          var data = {
            Method: 'RemoveMemberWeb',
            Name: username,
            Password: password,
            Data: [scoped.row.Name],
            Device_ID: os,
            Platform: brower
          }
          var msg = JSON.stringify(data)
          var data2 = new FormData()
          data2.append('content', msg)
          let url = 'api/member/reg_member.php'
          this.axios.post(url, data2).then((res) => {
            var resl = res.data
            if (resl.Result === 'OK') {
              this.$message({
                message: res.data.Message,
                type: 'success'
              })
              this.init()
            } else {
              this.$message({
                message: res.data.Message,
                type: 'error'
              })
            }
          })
        })
        .catch(res => {
          this.$message(`取消修改`)
        })
    },
    // 全部删除
    allDelete () {
    },
    // 全部绑定
    allBind () {
    },
    // 全部解绑
    allUnBind () {
    },
    // 解除绑定
    bindData (scoped) {
    },
    // 冻结解冻
    prohibitData (scoped) {
    },
    // 每页显示条数修改
    sizeChange (size) {
      this.size = size
    },
    // 切换分页
    currentChange (page) {
      this.page = page
    }
  },
  mounted () {
    this.init()
  }
}
</script>
<style scoped>
.AssetsManagement {
  width: 100%;
  min-height: 100%;
  background: #003a62;
  box-sizing: border-box;
}
.title {
  margin-bottom: 30px;
}
.userInfo {
  position: relative;
  width: 550px;
  padding: 35px;
}
</style>
